<template>
  <div>
    <div class="linear"></div>
    <div class="content">
      <div>
        <img
            alt="Vue logo"
            src="https://cdn-emasn.csair.com/csair-emas-cdn/material/taml/hc_logo.png"
            width="100%"
        />
      </div>
      <div class="login">
        <van-form
            @submit="onSubmit"
            style="width:100%"
        >
          <van-field
              v-model="username"
              name="username"
              :label="$t('m.userName')"
              :placeholder="$t('m.userName')"
          />
          <van-field
              v-model="password"
              type="password"
              name="password"
              :label="$t('m.password')"
              :placeholder="$t('m.password')"
          />
          <div style="padding: 2.666vw 4.26667vw">
            <span style="padding-right: 5px">{{$t('m.language')}} </span>
            <el-select @change="handleChange" size="mini" v-model="value" :placeholder="$t('m.choose')">
              <el-option value="中文">中文</el-option>
              <el-option value="English">English</el-option>
            </el-select>
          </div>
          <div>
            <mu-row gutter>
              <mu-col
                  span="3"
                  offset="3"
              >
                <mu-flex justify-content="center">
                  <mu-button
                      :ripple="false"
                      full-width
                      style="margin: 22px 50px 0 0"
                      @click="getCaptcha"
                      flat
                  >
                    <img
                        style="width: 130px"
                        :alt="$t('m.refresh')"
                        :src="codeSrc"
                    />
                  </mu-button>
                </mu-flex>
              </mu-col>
              <mu-col span="3">
                <mu-text-field
                    full-width
                    v-model="code"
                    :label="$t('m.code')"
                    label-float
                ></mu-text-field>
              </mu-col>
            </mu-row>
          </div>
          <div style="margin: 16px;">
            <van-button
                round
                block
                type="info"
                native-type="submit"
            >
              {{$t('btn.ok')}}
            </van-button>
          </div>
        </van-form>
      </div>
      <div class="bottom">
        <mu-icon left value="info"></mu-icon>
        <span class="text">Version</span>
      </div>
    </div>
    <component :is="component" :show="show" :userObj="userObj" @handleClose="handleClose"/>
  </div>
</template>

<script>
import { $cryptoUtils, transformArrayBufferToBase64 } from "@/assets/js/common"
import LoginPhone from "@/views/LoginPhone"
import { Notify,Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
import zhCN from 'vant/es/locale/lang/zh-CN'

export default {
  data() {
    return {
      username: '',
      password: '',
      code: '',
      codeSrc: '',
      captchaCode: '',
      component: '',
      userObj: {},
      show: false,
      now: Date.now(),
      value: '中文'
    }
  },
  created() {
    // this.changeCode()
    this.getCaptcha()
    if(sessionStorage.getItem('language') === 'en-US') {
      this.value = 'English'
      Locale.use('en-US', enUS)
    }
    else {
      Locale.use('zh-CN', zhCN)
      this.value = '中文'
    }
  },
  components: {
    LoginPhone,
    [Notify.Component.name]: Notify.Component
  },
  methods: {
    onSubmit(values) {
      if (this.username.trim() === '' || this.password.trim() === '') {
        return this.$msg.fail(this.$t('m.pleaseInput'))
      }
      this.show = true
      let temPwd = values.password.trim()
      let pwd = $cryptoUtils.getAesString(temPwd)
      values.password = pwd
      values.captchaCodeValue = this.code
      values.captchaCode = this.captchaCode
      values.dateTime = new Date().getTime()
      let username = this.username
      if (username.match(/^[0-9]*$/) == username && username.length >= 6 && username.length <= 7) {
        this.$api.login.remoteAuth(values)
            .then(res => {
              if (res.status === 400 || res.status === 250) {
                if (res.status === 250) {
                  this.show = true
                  this.userObj = res.data
                  this.component = 'LoginPhone'
                }
                else {
                  this.$msg.fail(res.msg || res.message || '网络错误,清稍后再试')
                }
              }
              else {
                window.sessionStorage.setItem('token',res.data.token)
                this.$msg.success(`${this.$t('m.success')}`)
                this.$router.push('/')
              }
            })
            .catch(err => {
              this.$msg.fail(err || err.message || '网络错误,清稍后再试')
              this.getCaptcha()
            })
            .finally(() => {
              this.code = ''
            })
      }
      else {
        this.$api.login.login(values)
            .then(res => {
              if (res.status !== 200) {
                Notify(res.message || '网络错误,清稍后再试')
              }
              else {
                window.sessionStorage.setItem('token',res.data.token)
                this.$msg.success(`${this.$t('m.success')}`)
                this.$router.push('/')
              }
            })
            .catch(err => {
              Notify(err || '网络错误,清稍后再试')
              this.getCaptcha()
            })
            .finally(() => {
              this.code = ''
            })
      }
      // this.push()
    },
    // 获取验证码
    getCaptcha() {
      this.$api.login.getCaptcha()
          .then(res => {
            this.captchaCode = res.headers.captchacode
            this.codeSrc = 'data:image/jpeg;base64,' + transformArrayBufferToBase64(res.data)
          })
          .catch(err => this.$msg.fail('获取验证码失败,请稍后再试',err))
    },
    handleClose() {
      this.component = ''
    },
    handleChange(value) {
      if(value === '中文') {
        this.$i18n.locale = 'zh-CN'
        sessionStorage.setItem('language','zh-CN')
        Locale.use('zh-CN', zhCN)
      }
      else {
        this.$i18n.locale = 'en-US'
        sessionStorage.setItem('language','en-US')
        Locale.use('en-US', enUS)
      }
    }
  }
}
</script>

<style scoped>
.login {
  margin-top: 25.778vw;
  margin-left: 11.389vw;
  width: 80%;
}
.linear {
  width: 100%;
  height: 35px;
  background-color: #639df5;
  vertical-align: top;
  position: fixed;
  top: 0;
  left: 0;
}
.bottom {
  position: relative;
  margin-top: 100px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}
.text {
  font-size: 15px;
  color: rgba(0,0,0,.5);
}
.el-select {
  width: 68%;
}
.content {
  top: 35px;
  position: absolute;
  left: 0;
}
</style>
